/<template>
  <div class="art">
    <h1 class="art_header">
      <span>内容管理</span>
      <span @click="openDialog">发表文章</span>
    </h1>
    <div class="art_search">
      <input type="text" placeholder="请输入标题" v-model="keyWord" />
      <button @click="search">查找</button>
      <button @click="reset">重置</button>
    </div>
    <ul class="art_list">
      <li v-for="(item, index) in $store.state.list" :key="item.id">
        <h3>{{ item.title }} 作者：{{ item.name }}</h3>
        <p>{{ item.text }}</p>
        <div>
          <button @click="editArt(index)">编辑</button>
          <el-popconfirm
            title="这是一段内容确定删除吗？"
            @confirm="sureDelete(index)"
          >
            <el-button slot="reference">删除</el-button>
          </el-popconfirm>
        </div>
      </li>
    </ul>
    <el-dialog :title="tit" :visible.sync="dialogVisible">
      <div>标题：<input type="text" placeholder="标题" v-model="title" /></div>
      <!-- <div>作者<input type="text" placeholder="作者" v-model="name"></div> -->
      <div>内容：<textarea v-model="text"></textarea></div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveArt">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      tit: "发布文章",
      index: null,
      title: "",
      text: "",
      keyWord:''
    };
  },
  mounted() {
    this.$store.dispatch("getList");
  },
  methods: {
    openDialog() {
      (this.dialogVisible = true), (this.tit = "发表文章");
    },
    editArt(index) {
      ((this.dialogVisible = true), (this.tit = "编辑文章")),
        (this.title = this.$store.state.list[index].title),
        (this.text = this.$store.state.list[index].text),
        (this.name = this.$store.state.list[index].name);
      this.index = index;
    },
    // 点击保存
    saveArt() {
      this.dialogVisible = false;
      // 判断是否为发表文章
      if (this.tit == "发表文章") {
        // 如果是，添加数据
        this.$store.commit("addArt", {
          title: this.title,
          text: this.text,
          name: "李雪菲",
        });
      } else {
        this.$store.commit("editArt", {
          title: this.title,
          text: this.text,
          // 获取原来的作者名称
          name: this.$store.state.list[this.index].name,
          // 修改对应下标的数据
          index: this.index,
        });
      }
      (this.title = ""), (this.text = "");
    },
    sureDelete(index) {
      this.$store.commit("deleteArt", index);
    },
    search(){
      this.$store.commit('searchArt',this.keyWord )
    },
    reset(){
      this.$store.dispatch('getList');
      this.keyWord=''
    }
  },
};
</script>

<style lang='scss'>
.art {
  width: 100%;
  .art_header {
    width: 100%;
    height: 60px;
    background: #fc0;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  .art_search {
    width: 100%;
    height: 80px;
    background: #09f;
    line-height: 80px;
    text-indent: 40px;
    input {
      width: 200px;
      height: 30px;
    }
  }
  .art_list {
    width: 100%;
    li {
      width: 100%;
      height: 200px;
      margin-top: 10px;
      background: #eee;
      h3 {
        height: 50px;
        line-height: 50px;
        text-indent: 30px;
      }
      p {
        height: 100px;
        line-height: 33px;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        text-indent: 2em;
      }
      div {
        display: flex;
        justify-content: end;
      }
    }
  }
}
</style>